<template>
    <div>
      <el-table :data="tableData" :header-cell-style="{background:'#3DC5A1',color:'#555'}" :border="true">
        <el-table-column prop="announcementId" label="编号" width="250">
          <template #default="scope">
            {{ scope.row.announcementId }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="200">
          <template #default="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发布者" width="200">
          <template #default="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="classification" label="分类" width="200">
          <template #default="scope">
            {{ scope.row.classification }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="200">
          <template #default="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="正文" width="200">
          <template #default="scope">
            <el-button size="small" @click="read(scope.row.announcementId)">查看正文</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.announcementId)" style="margin-left:5px">
              <el-button slot="reference" size="small">删除</el-button>
            </el-popconfirm>
            <el-button size="small" @click="mod(scope.row.announcementId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[7, 10, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </template>
  
  <script>
  export default {
    name: "MessageMange",
    mounted() {
      this.loadPost(); // 确保在组件挂载后加载数据
    },
    data() {
      return {
        tableData: [],
        pageNum: 1,
        pageSize: 7,
        total: 1,
        name: '',
        announcementId: '',
        text:"",
        centerDialogVisible: false,
        form: {
          announcementId: "",
          title: "",
          name: "",
          text:"",
          classification: "",
          createTime: ""
        },
      }
    },
    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum = 1;
        this.pageSize = val;
        this.loadPost();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.loadPost();
      },
      loadGet() {
        this.$axios.get('http://localhost:8082/announcement-info/list').then(res => res.data).then(res => {
          console.log(res);
          this.tableData = res;
        });
      },
      loadPost() {
        this.$axios.post('http://localhost:8082/announcement-info/listPage', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          total: this.total,
          param: {
            name: this.name,
            announcementId: this.announcementId
          }
        }).then(res => res.data).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.tableData = res.data;
            this.total = res.total;
          } else {
            alert("获取失败");
          }
        });
      },
      del(announcementId) {
        console.log(announcementId);
        this.$axios.get('http://localhost:8082/announcement/delete?announcementId=' + announcementId).then(res => res.data).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              message: '删除成功'
            });
            this.loadPost();
          } else {
            this.$message({
              message: '删除失败'
            });
          }
        });
      },
      mod(id) {
        console.log("修改");
       this.$router.push('/text/'+id);
      },
      read(id){
        console.log("查看正文");
        this.$router.push('/text1/'+id);
      },
      save() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$axios.post('http://localhost:8082/announcement/saveOrMod', this.form).then(res => res.data).then(res => {
              console.log(res);
              if (res.code == 200) {
                this.$message({
                  message: '添加成功'
                });
                this.centerDialogVisible = false;
                this.loadPost();
              } else {
                this.$message({
                  message: '添加失败'
                });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    beforeMount() {
      this.loadGet();
    }
  }
  </script>